<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PeaGreenBoatPhotography</title>
    <link rel="stylesheet" href="css/default.css" />
    <link rel="stylesheet" href="js/slimbox-1.64/css/slimbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/slimbox-1.64/js/mootools.js"></script>
    <script type="text/javascript" src="js/slimbox-1.64/js/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="js/slimbox-1.64/js/mootools-1.2-more.js"></script>
    <script type="text/javascript" src="js/slimbox-1.64/src/slimbox.js"></script>
    <script language="javascript" type="text/javascript">
        var config = null;
        
        //---------------------------------------------------------------------------
        // Gets the configuration object for
        //---------------------------------------------------------------------------
        function getConfig() 
        {
            return (null == config) ?  
                config = loadConfig("/config/children.slimbox.config.js") : 
                config;
        }
            
        //---------------------------------------------------------------------------
        // Formats supplied date as an "HTTP-date" 
        // format: "Sat, 29 Oct 1994 19:43:31 GMT"
        //---------------------------------------------------------------------------
        function formatHttpDate(date) 
        { 
            if (undefined == date || null == date)
                throw "Argument exception. Missing date argument.";
            
            return date.toUTCString();    
        }
    
        //---------------------------------------------------------------------------
        // Loads configuration file synchronously
        //---------------------------------------------------------------------------
        function loadConfig(url) 
        {
            if (undefined == url || null == url)
                throw "Null argument. The url argument is required.";
        
            var result = null;
            
            var request = new Request( 
                { 
                    async       : false,
                    method      : "get",
                    url         : url,
                    onSuccess   : function(responseText, responseXml) 
                    {
                        result = responseText;
                    },
                    onFailure   : function(instance) 
                    {
                        throw "Failed to load from file: " + url;
                    }
                }
            )
            
            //
            // [!] Config refreshed if modified inside the last 36 hours.
            //
            var now = new Date(); 
            now.setUTCHours(now.getUTCHours() - 36);
             
            request.setHeader("If-Modified-Since", formatHttpDate(now));
            
            request.send();
            
            return result;
        }
        
        //---------------------------------------------------------------------------
        // Returns the set of images being displayed
        //---------------------------------------------------------------------------
        function getImages() 
        {     
            return JSON.decode(getConfig());
        }
        
        //---------------------------------------------------------------------------
        // Opens the lightbox at the specified zero-based index
        //---------------------------------------------------------------------------
        function openLightBox(index, width, height) 
        { 
            if (width == undefined)
            {
                width = 400;
            }
            
            if (height == undefined) 
            {
                height = 300;
            }
            
   
            Slimbox.open(
                getImages(),
                index,
                {
	                loop                : 1,
	                overlayOpacity      : 0.75,
	                resizeTransition    : Fx.Transitions.Bounce.easeInOut,
	                counterText         : "Image {x} of {y}",
	                resizeDuration      : 100,
	                initialWidth        : width,
			        initialHeight       : height
                }
            );
        }
        
        window.addEvent(
            "domready", 
            function() 
            {      
                var morphDuration   = 200;
                var inTransition    = Fx.Transitions.Bounce.easeIn;
                var outTransition   = Fx.Transitions.Bounce.easeOut;
                
		        $$("#thumbnails a img").addEvent(
		            "mouseover", 
		            function() 
		            {
                        new Fx.Morph(
			                this,
			                {
			                    duration    : morphDuration, 
			                    transition  : inTransition
			                }
                        ).
                        cancel().
                        start({'opacity' : [0.75]})
		            }
		        );
		        
		        $$("#thumbnails a img").addEvent(
		            "mouseout", 
		            function() 
		            {
                        new Fx.Morph(
			                this,
			                {
			                    duration    : morphDuration, 
			                    transition  : outTransition
			                }
                        ).
                        cancel().
                        start({'opacity' : [1]})
		            }
		        );
            }
        );
    </script>
</head>
<body>
    <div id="body">
        <div id="one">
            <div id="one-inner"></div>
        </div>
        <div id="two">
            <div id="two-inner">
                <img src="img/res/main-children.gif" id="header" width="219" height="28" alt="[img] logo title" />
                <div class="thumb-collection" id="thumbnails">
                    <a href="javascript:void(0)" onclick="openLightBox(0, 305, 450)"><img src="img/thumbnails/children/Mollyfatface.jpg" width="50" height="75" class="thumbnail" alt=""/></a>
                    <a href="javascript:void(0)" onclick="openLightBox(1, 677, 450)"><img src="img/thumbnails/children/mollymary5big.jpg" id="Img10" width="113" height="75" alt=""class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(2)"><img src="img/thumbnails/children/Park_89bw.jpg" id="Img11" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(3)"><img src="img/thumbnails/children/Mia.jpg" id="Img9" width="50" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(4)"><img src="img/thumbnails/children/Park_90.jpg" id="Img13" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(5)"><img src="img/thumbnails/children/Willapple.jpg" id="Img1" width="50" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(6)"><img src="img/thumbnails/children/boy_2.jpg" id="Img12" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(7)"><img src="img/thumbnails/children/DSC_60130.jpg" id="Img8" width="50" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(8)"><img src="img/thumbnails/children/DSC_0073.jpg" id="Img2" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(9)"><img src="img/thumbnails/children/DSC_0074.jpg" id="Img3" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(10)"><img src="img/thumbnails/children/DSC_0130.jpg" id="Img4" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(11)"><img src="img/thumbnails/children/DSC_7678.jpg" id="Img5" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(12)"><img src="img/thumbnails/children/IMG_1103bw.jpg" id="Img6" width="113" height="75" class="thumbnail" /></a>
                    <a href="javascript:void(0)" onclick="openLightBox(13)"><img src="img/thumbnails/children/Maria_2.jpg" id="Img7" width="113" height="75" class="thumbnail" /></a>
                </div>
            </div>
        </div>
        <div id="three">
            <div id="navigation">
                <map name="navigation-map" id="navigation-map">
                    <!-- x1,y1,x2,y2 -->
                    <area shape="rect" coords="0,0,30,11" href="index.html" alt="[img] Home" title="[img] Home" />
                    <area shape="rect" coords="70,0,120,11" href="children.html" alt="[img] Children" title="[img] Children" />
                    <area shape="rect" coords="170,0,230,11" href="weddings.html" alt="[img] Weddings" title="[img] Weddings" />
                    <area shape="rect" coords="280,0,320,11" href="portraits.html" alt="[img] Portraits" title="[img] Portraits" />
                    <area shape="rect" coords="370,0,430,11" href="photostories.html" alt="[img] Photostories"
                        title="[img] Photostories" />
                    <area shape="rect" coords="480,0,565,11" href="prices.html" alt="[img] Prices" title="[img] Prices" />
                    <area shape="rect" coords="620,0,660,11" href="about.html" alt="[img] About" title="[img] About" />
                </map>
                <img src="img/res/navigation/nav.gif" width="666" height="12" alt="[img] Navigation" usemap="#navigation-map" />
            </div>
        </div>
    </div>
</body>
</html>
